<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="must-revalidate,no-cache">
    <meta http-equiv="x-dns-prefetch-control" content="on" />
    <meta name="version" content="20161115">
    <title>个人信息</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">  
	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/mui.picker.css" />
    <link rel="stylesheet" href="css/mui.poppicker.css"/> 
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <style type="text/css">
    	
    	
    </style>
</head>

<body class="w-message">
    <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll mui-mine">
            	<div class="myPic">
            		<i class="glyphicon glyphicon-menu-right"></i>
            		<div class="title">
            			头像
            		</div>
            		<div class="pic">
            			<img src="images/main-2.png" id="userIcon"/>
						<input type="file" id="imgUpload" name="file1" draggable="false" single accept="image/*">
            		</div>
            	</div>
            	<div class="myName">
            		<div class="title">
            			昵称
            		</div>
            		<input class="eh-font15 eh-c5a"  type="text"  placeholder="请输入昵称" maxlength="15">
            		<i class="glyphicon glyphicon-menu-right"></i>
            	</div>
            	<div class="myState">
            		<div class="title">
            			状态
            		</div>
            		<input id='showUserPicker' class="eh-font15 eh-c5a" type="text" value=""  placeholder="请选择状态" >
            		<i class="glyphicon glyphicon-menu-right"></i>
            	</div>
            	<div class="mySex">
            		<div class="title">
            			性别
            		</div>
            		<input id='showSexPicker' class="eh-font15 eh-c5a" type="text" value=""  placeholder="请选择性别" >
            		<i class="glyphicon glyphicon-menu-right"></i>
            	</div>
            	
           		<div class="myAge">
            		<div class="title">
            			年龄
            		</div>
            		<input class="eh-font15 eh-c5a"  type="text"  placeholder="请输入年龄" maxlength="4">
            		<i class="glyphicon glyphicon-menu-right"></i>
            	</div>
                <div class="myBottom">
                    <button>确认</button>
                </div>
            </div>
        </div>
    </div>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<script src="js/uploadImg.js" type="text/javascript" charset="utf-8"></script>
<script>
	//上传图片
	$(function(){
			$("img").click(function(){
				$("#imgUpload").click();
			})
			previewImage();
			
		});
(function($, doc) {
    $.init();
    $.ready(function() {
        //性别
        var sexPicker = new $.PopPicker();
        sexPicker.setData([{
            value: '0',
            text: '女'
        }, {
            value: '1',
            text: '男'
        },{
            value: '2',
            text: '未知'
        }]);
        
        var showSexPickerButton = doc.getElementById('showSexPicker');
        var sexResult = doc.getElementById('showSexPicker');
        showSexPickerButton.addEventListener('tap', function(event) {
            sexPicker.show(function(items) {
                sexResult.value = items[0].text;
                 
                //返回 false 可以阻止选择框的关闭
                //return false;
            });
        }, false);
       sexPicker.setSelectedValue('1',200);
        //级联示例
        var userPicker = new $.PopPicker();
        userPicker.setData([{
            value: '0',
            text: '备孕'
        }, {
            value: '1',
            text: '育儿'
        },{
            value: '2',
            text: '怀孕'
        }]);
        var showUserPickerButton = doc.getElementById('showUserPicker');
        var userResult = doc.getElementById('showUserPicker');
        showUserPickerButton.addEventListener('tap', function(event) {
            userPicker.show(function(items) {
                userResult.value =items[0].text;
                //返回 false 可以阻止选择框的关闭
                //return false;
            });
        }, false);

    });
})(mui, document);
</script>
</body>

</html>
